﻿<!DOCTYPE html>
<html>
<head>
	<title>onyx toolbar sample</title>
	<script src="../../../../enyo/enyo.js" type="text/javascript"></script>
	<script src="../../../onyx/package.js" type="text/javascript"></script>
	<script src="../../../layout/fittable/package.js" type="text/javascript"></script>
	<style>
		p {
			padding: 8px;
		}
	</style>
</head>
<body class="onyx enyo-unselectable">
	<script>
		new (enyo.kind({
			name: "App",
			kind: "Control",
			components: [
				{tag: "p", allowHtml: true, content: "This is a plain control with <code>onyx-toolbar</code> class which does no layout work, but sets up basic toolbar styling, including styles for children (in particular <code>onyx.Button</code> and <code>onyx.InputDecorator</code>.)"},
				{classes: "onyx-toolbar", components: [
					{kind: "onyx.Grabber", style: "display: inline-block;"},
					{tag: "span", content: "Hello World"},
					{kind: "onyx.IconButton", src: "menu-icon-bookmark.png"},
					{tag: "span", content: "Hello World More"},
					{kind: "onyx.Button", content: "Toolbar Button"},
					{kind: "onyx.InputDecorator", components: [
						{kind: "onyx.Input", value: "Toolbar Input"}
					]}
				]},
				//
				{tag: "p", allowHtml: true, content: "Adding the <code>onyx-toolbar-inline</code> class provides a simple layout strategy (items are made inline and given horizontal margin)."},
				{classes: "onyx-toolbar onyx-toolbar-inline", components: [
					{kind: "onyx.Grabber"},
					{content: "Hello World"},
					{kind: "onyx.IconButton", src: "menu-icon-bookmark.png"},
					{content: "Hello World More"},
					{kind: "onyx.Button", content: "Toolbar Button"},
					{kind: "onyx.InputDecorator", components: [
						{kind: "onyx.Input", value: "Toolbar Input"}
					]}
				]},
				//
				{tag: "p", allowHtml: true, content: "This is an instance of <code>onyx.Toolbar</code> kind, it's really just a Control with <code>onyx-toolbar</code> and <code>onyx-toolbar-inline</code> classes by default."},
				{kind: "onyx.Toolbar", components: [
					{kind: "onyx.Grabber"},
					{content: "Hello World"},
					{kind: "onyx.IconButton", src: "menu-icon-bookmark.png"},
					{content: "Hello World More"},
					{kind: "onyx.Button", content: "Toolbar Button"},
					{kind: "onyx.InputDecorator", components: [
						{kind: "onyx.Input", value: "Toolbar Input"}
					]}
				]},
				//
				{tag: "p", allowHtml: true, content: "Sizing Test: toolbars adapt to content height, but we want our standard toolbar controls to result in consistent toolbar heights. Visible red color above or below one of these toolbars represents a sizing problem."},
				{style: "background-color: red; white-space: nowrap;", components: [
					{kind: "onyx.Toolbar", style: "display: inline-block; width: 40px; margin-right: 8px;", components: [
						{kind: "onyx.Grabber"}
					]},
					{kind: "onyx.Toolbar", style: "display: inline-block; width: 40px; margin-right: 8px;", components: [
						{kind: "onyx.IconButton", src: "menu-icon-bookmark.png"}
					]},
					{kind: "onyx.Toolbar", style: "display: inline-block; width: 160px; margin-right: 8px;", components: [
						{content: "Just Text"}
					]},
					{kind: "onyx.Toolbar", style: "display: inline-block; width: 200px; margin-right: 8px;", components: [
						{kind: "onyx.InputDecorator", components: [
							{kind: "Input", placeholder: "Just a (Decorated) Input"}
						]}
					]},
					{kind: "onyx.Toolbar", style: "display: inline-block; width: 160px; margin-right: 8px;", components: [
						{kind: "onyx.Button", content: "Just A Button"}
					]},
					{kind: "onyx.Toolbar", style: "display: inline-block; width: 500px; margin-right: 8px; white-space: nowrap;", components: [
						{kind: "onyx.Grabber"},
						{content: "Text And"},
						{kind: "onyx.Button", content: "A Button"},
						{kind: "onyx.InputDecorator", components: [
							{kind: "Input", placeholder: "And a (Decorated) Input"}
						]}
					]}
				]},
				//
				{tag: "p", allowHtml: true, content: "Experimental toolbar based on <code>FittableColumns</code>, has scrollable middle region."},
				{kind: "FittableColumns", noStretch: true, classes: "onyx-toolbar onyx-toolbar-inline", components: [
					{kind: "onyx.Grabber"},
					{content: "Header"},
					{kind: "Scroller", thumb: false, fit: true, touch: true, vertical: "hidden", style: "margin: 0;", components: [
						{classes: "onyx-toolbar-inline", style: "white-space: nowrap;", components: [
							{kind: "onyx.Button", content: "Button"},
							{kind: "onyx.Button", content: "Down", classes: "active"},
							{kind: "onyx.Button", content: "Button"},
							{kind: "onyx.IconButton", src: "menu-icon-bookmark.png"},
							{kind: "onyx.InputDecorator", components: [
								{kind: "onyx.Input", placeholder: "Input"}
							]},
							{kind: "onyx.Button", content: "Right"},
							{kind: "onyx.InputDecorator", components: [
								{kind: "onyx.Input", placeholder: "Right Input"}
							]},
							{kind: "onyx.Button", content: "More Right"}
						]}
					]},
					{kind: "onyx.Button", content: "Right"}
				]}
			]
		}))().write();
	</script>
</body>
</html>
